<template>
  <div>
    <div :class="{hidden: isHidden}">
      <div class="app-container">
        <!-- 搜索面板 -->
        <el-row>
          <search-panel
            search
            :create="canCreate"
            :item-name="$t('n')+$t('tool')"
            :item-number="totalTools"
            @on-search="onSearch"
            @on-create="onCreate"
          />
        </el-row>
        <!-- 数据列表 -->
        <el-row>
          <el-table v-loading="listLoading" :data="list" :stripe="true" element-loading-text="Loading" :border="false" :header-cell-style="{color:'black'}" fit highlight-current-row>
            <!-- 第一列 名称/描述 -->
            <el-table-column :label=" $t('name') + '/' + $t('description')" align="center" min-width="20%">
              <template v-slot="scope">
                <div class="cell-text">
                <div class="txt-left">
                  <div style="font-weight: bold; color: black;">
                  {{ scope.row.name }}
                </div>
                <div >{{ scope.row.description }}</div>
                </div>
              </div>
              </template>
            </el-table-column>

            <el-table-column :label="$t('host')" align="center" width="300px">
              <template v-slot="scope">
                <el-link :href="scope.row.host" target="_blank" class="buttonText" type="primary" :underline="false">
                  {{ scope.row.host }}
                </el-link>
              </template>
            </el-table-column>

            <!-- 第五列 操作 -->
            <el-table-column align="center" :label="$t('operation')" width="119px" fixed="right">
              <template v-slot="scope">
                <span v-if="$store.getters.isAdmin() || $store.getters.isDeveloper()">
                  <a href="javascript:void(0)" class="font-blue" @click="toDetail(scope.row.id)">{{ $t('detail') }}</a>
                </span>
                &nbsp;
                <span>
                  <a href="javascript:void(0)" class="font-blue" @click="toTest(scope.row)">{{ $t('test') }}</a>
                </span>
                &nbsp;
                <br/>
                <span v-if="$store.getters.isAdmin()">
                  <a href="javascript:void(0)" class="font-blue" @click="toEdit(scope.row.id)">{{ $t('edit') }}</a>
                </span>
                &nbsp;
                <span v-if="$store.getters.isAdmin()">
                  <a href="javascript:void(0)" class="font-blue" @click="toDelete(scope.row.id)">{{ $t('delete') }}</a>
                </span>
                &nbsp;
<!--                <span v-if="$store.getters.isAdmin()">-->
<!--                  <a href="javascript:void(0)" class="font-blue" @click="toDelete(scope.row.id)">{{ $t('delete') }}</a>-->
<!--                </span>-->

<!--                <span v-if="$store.getters.isAdmin()">-->
<!--                  <a href="javascript:void(0)" class="font-blue" @click="toTest(scope.row)">{{ $t('test') }}</a>-->
<!--                </span>-->
                &nbsp;

<!--                <br/>-->

              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <!-- 页数 -->
        <el-row>
          <el-pagination
            align="center"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-count="pageNum"
            :total="totalTools"
            @current-change="freshList"
          />
        </el-row>
      </div>
    </div>

    <div :class="{hidden: !isHidden}">
      <router-view />
    </div>
    <TestTool v-if="showTestTool" :visible.sync="showTestTool" :testRow="testRow" @cancelTest="cancelTest"></TestTool>
  </div>
</template>

<script>
import { getTools, deleteTools, retrieveTools } from '@/api/tool.js'
// import { Message } from 'element-ui'
import SearchPanel from './SearchPanel/index.vue'
import TestTool from './testTool/index.vue'
// import store from '@/store'
// import { retrieveMethodologies } from '@/api/methodology'
// import { dateFormat } from '@/utils/common'

export default {
  components: {
    SearchPanel,
    TestTool
  },
  data() {
    return {
      // 查询
      searchForm: {
        key: ''
      },
      fullList:[],
      list: [],
      listLoading: true,
      pageSize: 15,
      totalTools: 0,
      pageNum: 0,
      currentPage: 1,
      hidden: true,

      // 用于三极路由
      isHidden: false,
      showTestTool:false,
      testRow:null
    }
  },

  computed: {
    totalPages() {
      return Math.ceil(this.totalTools / this.pageSize)
    },
    canCreate() {
      return this.$store.getters.isAdmin();
    }
  },
  created() {
    this.listLoading = false
    // 三级路由
    if (this.$route.path !== '/tool/index') {
      this.isHidden = true
    }
    this.freshList(1)
    // this.retrieveTools() // 检索函数，暂时不知道干啥的
  },
  methods: {
    // 更新列表
    freshList(nowPage) {
      const params = {
        'page': nowPage,
        'pagesize': this.pageSize,
        searchKey: this.searchForm.key
      }
      getTools(JSON.stringify(params)).then(response => {
        const data = response
        // 获取工具总数
        this.totalTools = data.TotalNum
        this.list = data.tools
        /* 以下为前端分页实现 */
        // this.fullList = data.tools // 获取工具全部数据
        // // 计算总页数
        // this.pageNum = Math.ceil(this.totalTools / this.pageSize)
        // //就算起始下标
        // const startIndex = (this.currentPage - 1) * this.pageSize
        // const endIndex = Math.min(startIndex + this.pageSize, this.totalTools)
        // //截取数据
        // this.list = this.fullList.slice(startIndex,endIndex)
        /* this.$message({
          message: '获取成功',
          type: 'success'
        }) */
      }).catch(error => {
        console.log(error)
        this.$message({
          message: this.$t('acquisition_failure'),
          type: 'error'
        })
      }
      )
      this.currentPage = nowPage
    },
    // 搜索
    onSearch(key, status, namespace, chart, label) {
      this.searchForm.key = key
      this.freshList(1)
    },
    // unknown
    onClear() {
      this.searchForm.key = ''
      this.searchForm.label = []
    },
    // 详情
    toDetail(id) {
      this.$router.push({
        path: '/tool/index/detail',
        query: {
          id: id,
          is_edit: true
        }
      })
    },
    // 编辑
    toEdit(id) {
      this.$router.push({
        path: '/tool/index/edit',
        query: {
          id: id,
          is_edit: true
        }
      })
    },
    // 删除
    toDelete(id) {
      this.$confirm(this.$t('tool_delete_tips'), this.$t('tip'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        // 删除该tool
        deleteTools(id).then(response => {
          console.log(response.data)
          // 删除成功后，刷新以下页面
          this.freshList(1)
          this.$message({
            message: this.$t('delete_success_tips'),
            type: 'success'
          })
        }).catch(error => {
          console.log(error)
          this.$message({
            message: this.$t('delete_error_tips'),
            type: 'error'
          })
        })
      }).catch(error => {
        console.log(error)
        this.$message({
          message: this.$t('delete_cancel_tips'),
          type: 'info'
        })
      })
    },
    toTest(row) {
      if (typeof row.parameters === 'string') {
        this.$message.warning(this.$t('Parameter_format_error') + '！')
        return
      }
      this.testRow = row
      this.showTestTool = true
    },
    cancelTest() {
      this.testRow = null
      this.showTestTool = false
    },
    onCreate() {
      this.$router.push({
        path: '/tool/index/edit',
        query: {
          id: 0,
          is_edit: false
        }
      })
      // alert('仍在测试阶段')
    },
    retrieveTools() {
      let retrieve = {
        'instruction': 'test',
        'topk': 100
      }
      retrieve = JSON.stringify(retrieve)
      // console.log(insturction)
      retrieveTools(retrieve).then(response => {
        console.log(response.data)
        /* this.$message({
          message: '检索成功',
          type: 'success'
        }) */
      }).catch(error => {
        console.log(error)
        this.$message({
          message: this.$t('Retrieval_failed'),
          type: 'error'
        })
      }
      )
    }
    /*
    // 模板详情
    totemplateDetail(name) {
      if (name.includes('空白')) {
        Message({
          message: '该模板为空',
          type: 'warning',
          duration: 5 * 1000
        })
      } else {
        this.$router.push({ name: '模板详情ByName', params: { name: name }})
      }
    },
    // 标签管理
    toLabelManagement() {
      this.$router.push({ path: '/project/container/label' })
    },
    // 新建
    toNew() {
      // this.updateTools()
      this.createTools()
      // this.$router.push({ path: '/project/container/new' })
    }
    */
  }
}
</script>

<style scoped lang="scss">
.app-container{
  padding: 20px;
}
.font-blue {
  color: #66b1ff
}
.hidden{
  display: none;
}
.cell-text{
  display: flex;
  justify-content: center;
  .txt-left{
    text-align: left;
    width: 100%;
    //margin-left: 25px;
}

}
::v-deep .el-pagination__rightwrapper{
  display: none!important;
}
</style>

